<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{include :: header('账户信息列表')}" />
    <th:block th:insert="~{include :: bootstrap-table-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mb-2">
        <div class="row">
            <div class="toolbar" id="toolbar" role="group">
                <form id="formId" class="form-inline">
                    <input class="form-control mr-1" placeholder="id/手机号/用户名" type="text" name="searchKey"/>
                    <select class="form-control mr-1" name="accountStatus" th:with="type=${@dict.getType('qdx_account_type')}">
                        <option value="">状态</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                    <a class="btn btn-primary btn-rounded mr-1" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                    <a class="btn btn-warning btn-rounded" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                </form>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table" class="table-striped"></table>
            </div>
        </div>
    </div>
    <th:block th:insert="~{include :: footer}" />
     <th:block th:insert="~{include :: bootstrap-table-js}" />
    <script th:inline="javascript">
        var prefix = "/user/account";
        $(function() {
            var options = {
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                url: prefix + "/list.json",
                modalName: "账户信息",
                columns: [
                    {
                        field: 'id',
                        title: 'ID',
                        visible: false
                    },
                    {
                        field: 'userId',
                        title: '用户ID'
                    },
                    {
                        field: 'userName',
                        title: '名称'
                    },
                    {
                        field: 'mobile',
                        title: '手机号码'
                    },
                    {
                        field: 'balance',
                        align: 'center',
                        title: '账户余额',
                        formatter: function (value, row, index) {
                            return row.balance / 100
                        }
                    },
                    {
                        field: 'frozenAmount',
                        align: 'center',
                        title: '冻结金额',
                        formatter: function (value, row, index) {
                            return row.frozenAmount / 100
                        }
                    },
                    {
                        field: 'backAmount',
                        align: 'center',
                        title: '返现金额',
                        formatter: function (value, row, index) {
                            return row.backAmount / 100
                        }
                    },
                    {
                        field: 'vmAmount',
                        align: 'center',
                        title: '充值金额',
                        formatter: function (value, row, index) {
                            return row.vmAmount / 100
                        }
                    },
                    {
                        field: 'updateTime',
                        title: '更新时间'
                    },
                    {
                        field: 'accountStatus',
                        title: '账户状态',
                        formatter: function (value, row, index) {
                            if (row.accountStatus === 'ACTIVE') {
                                return '<span class="badge badge-primary">正常</span>'
                            } else if (row.accountStatus === 'FROZEN') {
                                return '<span class="badge badge-danger">冻结</span>'
                            }
                        }
                    },
                    {
                        title: '操作',
                        width: 180,
                        formatter: function (value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="RecharDeduct(\'' + row.userId + '\',\'' + "credit" + '\',\'' + row.accountStatus + '\')"><i class="fa fa-cart-plus"></i>充值</a> ');
                            actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="RecharDeduct(\'' + row.userId + '\',\'' + "debit" + '\',\'' + row.accountStatus + '\')"><i class="fa fa-cart-arrow-down"></i>扣款</a> ');

                            if (row.accountStatus === "ACTIVE") {
                                actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="frozenOrThaw(\'' + row.userId + '\',\'' + "FROZEN" + '\')"><i class="fa fa-toggle-on"></i>冻结</a> ');
                            } else {
                                actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="frozenOrThaw(\'' + row.userId + '\',\'' + "ACTIVE" + '\')"><i class="fa fa-toggle-off"></i>解冻 </a> ');
                            }
                            actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" onclick="detailedList(\'' + row.userId + '\')"><i class="fa fa-line-chart"></i>记录</a>');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });

        //充值或扣款
        function RecharDeduct(userId,flag,state) {
            var str = "";
            if (flag === "credit") {
                str = "账户充值"
            } else {
                str = "账户扣款"
            }
            if (state !== "ACTIVE") {
                $.modal.alertError('账户被冻结，无法操作' + str)
                return false;
            }
            $.modal.open(str, prefix + "/recharge.html?userId=" + userId + "&flag=" + flag,"700px","400px");
        }
        
        //冻结或解冻账户
        function frozenOrThaw(userId,sta) {
            table.set();
            var str = "";
            if (sta === "ACTIVE") {
                str = "确定要解冻该账户吗？"
            } else {
                str = "确定要冻结该账户吗？"
            }
            $.modal.confirm(str, function () {
                var data = {"userId": userId, "accountStatus": sta};
                $.operate.submit(prefix + "/status.json", "post", "json", data);
            });
        }

        //查询账户记录
        function detailedList(userId) {
            layer.open({
                type: 2,
                area: ['90%', '95%'],
                fix: false,
                maxmin: true,
                shade: 0.3,
                title: "账户记录",
                content: "/user/account/info/list.html?userId=" + userId
            });
        }
    </script>
</body>
</html>